<template>
  <div class="my-note">
    <div class="top">
      <span class="time">2022.11.20</span>
      <span class="label">{{ label[card.type][card.label] }}</span>
    </div>
    <p class="content">
      {{ card.message }}
    </p>
    <div class="bottom">
      <div class="left">
        <div class="like">
          <i class="iconfont icon-xiai"></i>
          <span>{{ card.like }}</span>
        </div>
        <div class="comment">
          <i class="iconfont icon-liuyan"></i>
          <span>{{ card.comment }}</span>
        </div>
      </div>

      <span class="right">{{ card.name }}</span>
    </div>
  </div>
</template>

<script>
import { label } from "@/utils/data";
import { toRef, onMounted } from "vue";
export default {
  props: ["note"],
  setup(props) {
    let card = toRef(props, "note");
    onMounted(() => {
      console.log(card);
    });

    return {
      label,
      card,
    };
  },
};
</script>

<style lang="scss" scoped>
.my-note {
  width: 288px;
  height: 240px;
  background: rgba(255, 227, 148, 0.3);
  padding: 10px $pd-20;
  box-sizing: border-box;

  .top {
    display: flex;
    justify-content: space-between;
    font-size: $font-12;
  }

  .content {
    font-size: $font-14;
    text-align: left;
    padding-top: $pd-20;
    width: 100%;
    height: 140px;
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    padding-top: $pd-20;

    .left {
      display: flex;
      .like {
        margin-right: $pd-8;
      }

      .iconfont {
        color: $gray-3;
        margin-right: $pd-4;
      }

      span {
        color: $gray-3;
        font-size: $font-14;
      }
    }

    .right {
      font-size: $font-14;
      color: $gray-1;
    }
  }
}
</style>
